{% extends 'common_project_tpl.html' %}
{% block css %}
    <style>
        .container-fluid a {
            text-decoration: none;
        }

        .choose {
            border-left: 2px solid #f90 !important;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container clearfix" style="margin-top: 20px;">
        <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-heading" style="background-color:transparent;font-weight: bold;">
                    个人中心
                </div>
                <div class="list-group" style="border-radius: 0">
                    <div>
                        <a href="#" class="list-group-item">我的资料</a>
                        <a href="#" class="list-group-item">修改密码</a>
                        <a href="{% url 'main:setting_delete' pro_id %}"
                           class="list-group-item choose">删除项目</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="panel panel-default">
                <div class="panel-heading"><i class="fa fa-address-card-o" aria-hidden="true"></i> 我的资料</div>
                <div class="panel-body">
                    <form id="form-delete-project">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="project_name">项目名称</label>
                            <input type="text" class="form-control" id="project_name" name="project_name"
                                   placeholder="请输入当前项目名称">
                            <span class="error-msg"></span>
                        </div>
                        <button id="delete-btn" type="button" class="btn btn-danger" style="margin-top: 5px;">确认删除
                        </button>
                        <span style="color: red;">删除项目后，其内部所有文件，问题，数据都会删除且无法恢复！请谨慎操作！</span>
                    </form>
                </div>
            </div>

        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            deleteProject();
        })

        function deleteProject() {
            $('#delete-btn').click(function () {
                $('.error-msg').empty();
                let data = {};
                let form_data = $('#form-delete-project').serializeArray()
                $.each(form_data, function () {
                    data[this.name] = this.value; // 这里this对象，指代遍历form_data中每个元素对象
                });
                data.user = {{ request.user.id }};
                $.ajax({
                    url: "{% url 'main:api_detail_project' pro_id %}",
                    data: data,
                    dataType: 'json',
                    type: 'delete',
                    headers: {
                        'X-CSRFTOKEN': $("[name='csrfmiddlewaretoken']").val()
                    },
                    success: function (res) {
                        console.log(res)
                        if (res.ret === 0) {
                            location.href = "{% url 'main:project' %}";
                        } else { //循环此字典每次循环执行函数
                            $('#project_name').next().text(res.errors)
                        }
                    },
                    error: function (res) {
                        $('#project_name').next().text(res.responseJSON.errors)
                    }
                })
            })
        }
    </script>
{% endblock %}